<template>
  <span
    class="sort-item"
    :class="{ active, asc: query.order === 'asc' && active }"
    @click="changeSort"
  >
    {{ text }} <icon name="sort" /><slot name="right"></slot>
  </span>
</template>

<script>
export default {
  props: ["text", "sort", "query"],
  computed: {
    active() {
      return this.sort === this.query.sort;
    }
  },
  methods: {
    changeSort() {
      const sort = this.sort;
      if (this.query.sort !== sort) {
        this.query.sort = sort;
        this.query.order = "desc";
      } else {
        if (this.query.order === "desc") {
          this.query.order = "asc";
        } else if (this.query.order === "asc") {
          this.query.order = undefined;
          this.query.sort = undefined;
        }
      }

      console.log(this.query);
    }
  }
};
</script>

<style lang="less" scoped>
.sort-item {
  cursor: pointer;
  display: flex;
  align-items: center;

  .icon-sort {
    width: 14px;
    margin-left: -1px;
    margin-top: 1px;
  }

  &.active {
    color: @primary-color;
  }

  &.asc {
    .icon-sort {
      transform: rotate(180deg);
    }
  }
}
</style>
